<template>
    <div class="tab_content">
        <div id='' class='i_tab'>
            <div v-for="(item,index) in list" :key="index" :class="active==item.title?'item active':'item'" @click="onClick(item)">{{item.title}}</div>
        </div>
        <div v-if="!hiddenMore" class="more" @click="addMore">
            查看更多
        </div>
    </div>
</template>
<script>
export default {
    name: '',
    props: ['list', 'hiddenMore', 'module'],
    data() {
        return {
            active: '政策信息',
        };
    },
    components: {},
    computed: {},
    beforeMount() { },
    mounted() {
        for (let i = 0; i < this.list.length; i++) {
            const element = this.list[i];
            if (element.default) {
                this.active = element.title
            }
        }
    },
    methods: {
        onClick(event) {
            this.active = event.title;
            this.$emit('onClick', event)
        },
        addMore() {
            this.$emit('addMore', { title: this.module })
        }
    },
    watch: {}
}
</script>
<style lang='less' scoped>
.tab_content {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    .i_tab {
        width: 75%;
        display: flex;
        width: 100%;
        .item {
            position: relative;
            cursor: pointer;
            width: 100px;
            height: 48px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: bold;
            color: #808695;
        }
        .active {
            font-size: 16px;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: bold;
            color: #17233d !important;
        }
        .active::after {
            position: absolute;
            content: "";
            width: 80%;
            height: 2px;
            background: #2d8cf0;
            bottom: 0;
            opacity: 1;
        }
    }
    .more {
        cursor: pointer;
        width: 15%;
        font-size: 16px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #5cadff;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>